<template>
  <div
    id="bottom"
    class="bottom"
    :style="{ bottom: isShow ? '0px' : '-303px' }"
  >
    <div class="bottom_box">
      <div class="big-tit">
        <img
          src="@/assets/tit-right-bg.png"
          style="height: 32px; width: 100%; display: block;background-size: cover"
        />
        <div
          style="
            position: absolute;
            top: 4px;
            left: 8px;
            font-weight: bold;
            text-align: center;
          "
        >
          进出港申报预审
        </div>
      </div>
      <div class="big-content">
        <div class="content">
          <div style="height: 243px; overflow: auto" class="scroll">
            <div
              style="
                position: sticky;
                top: 0;
                left: 0;
                background-color: #132054;
              "
            >
              <div class="table-header">
                <div
                  style="
                    text-align: center;
                    flex: 1;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                  "
                >
                  拟载货品
                </div>
                <div
                  style="
                    text-align: center;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    flex: 1;
                  "
                >
                  卸载货品
                </div>
                <div
                  style="
                    text-align: center;
                    flex: 1;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                  "
                >
                  船舶
                </div>
                <div
                  style="
                    text-align: center;
                    flex: 1;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                  "
                >
                  船舶识别号
                </div>
                <div
                  style="
                    text-align: center;
                    flex: 1;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                  "
                >
                  进出港
                </div>
                <div
                  style="
                    text-align: center;
                    flex: 1;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                  "
                >
                  创建时间
                </div>
                <div
                  style="
                    text-align: center;
                    width: 100px;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                  "
                >
                  操作
                </div>
              </div>
            </div>
            <div class="item-container">
              <div
                v-for="(item, index) in entry_out_apply"
                :key="index"
                class="item"
                style="overflow-x: scroll"
              >
                <div
                  style="
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    flex: 1;
                  "
                >
                  {{ item.preloadGoods }}
                </div>
                <div style="margin-top: 8px">
                  <img src="@/assets/Line.png" />
                </div>
                <div
                  style="
                    text-align: center;
                    flex: 1;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                  "
                >
                  {{ item.unloadGoods }}
                </div>
                <div style="margin-top: 8px">
                  <img src="@/assets/Line.png" />
                </div>
                <div
                  style="
                    text-align: center;
                    flex: 1;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                  "
                >
                  {{ item.shipName }}
                </div>
                <div style="margin-top: 8px">
                  <img src="@/assets/Line.png" />
                </div>
                <div
                  style="
                    text-align: center;
                    flex: 1;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                  "
                >
                  {{ item.shipId }}
                </div>
                <div style="margin-top: 8px">
                  <img src="@/assets/Line.png" />
                </div>
                <div
                  style="
                    text-align: center;
                    flex: 1;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                  "
                >
                  {{ item.declareType }}
                </div>
                <div style="margin-top: 8px">
                  <img src="@/assets/Line.png" />
                </div>
                <div
                  style="
                    text-align: center;
                    flex: 1;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                  "
                >
                  {{ item.createTime }}
                </div>
                <div style="margin-top: 8px">
                  <img src="@/assets/Line.png" />
                </div>
                <div
                  style="
                    text-align: center;
                    width: 100px;
                    display: flex;
                    /* justify-content: space-around; */
                  "
                >
                  <span
                    style="cursor: pointer; display: inline-block; width: 100%"
                    :style="{ color: item.state == 0 ? 'red' : '' }"
                    v-if="item.state == 0"
                    @click.stop="todetail(item)"
                  >
                    <i class="el-icon-edit"></i>

                    确认</span
                  >
                  <span
                    style="cursor: pointer; display: inline-block; width: 100%"
                    @click.stop="todetail(item)"
                    v-if="item.state != 0"
                  >
                    <i
                      class="el-icon-s-order"
                      style="display: inline-block; margin-right: 5px"
                    ></i
                    >详情
                  </span>
                </div>
              </div>
              <div
                v-if="showList"
                style="
                  display: flex;
                  flex-direction: column;
                  justify-content: center;
                  align-items: center;
                  width: 50%;
                  height: 50%;
                  margin: auto;
                "
              >
                <img
                  src="@/assets/kong.png"
                  alt=""
                  style="width: 115px; height: 100px"
                />
                <div style="margin-top: 10px">暂无数据</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div id="showButton" class="showButton" @click="toggleLeftPanel">
      {{ isShow ? "关闭" : "展开" }}
    </div>
    <!-- 详情 -->
    <div v-if="dialogVisible">
      <el-dialog
        :title="`${title}预审【${reportCode}】`"
        :visible.sync="dialogVisible"
        width="50%"
        :modal="false"
        @close="dialogClose"
        :close-on-click-modal="false"
      >
        <!-- 进港 -->
        <div class="list" v-if="type == 0">
          <div class="listitem">
            <span class="span">船舶名称</span>
            <!-- <span class="name">22222222</span> -->
            <span class="name">{{ detail.shipName }}</span>
          </div>
          <div class="listitem">
            <span class="span">船舶识别号</span>
            <span class="name">{{ detail.shipId }}</span>
          </div>
          <div class="listitem">
            <span class="span">船舶九位码</span>
            <span class="name">{{ detail.mmsi }}</span>
          </div>
          <div class="listitem">
            <span class="span">货主单位</span>
            <span class="name">{{ detail.ownerUnit }}</span>
          </div>
          <div class="listitem">
            <span class="span">收货人</span>
            <span class="name">{{ detail.consignee }}</span>
          </div>
          <div class="listitem">
            <span class="span">总重量</span>
            <span class="name">{{ detail.totalWeight }}</span>
          </div>
          <div class="listitem">
            <span class="span">靠泊码头</span>
            <span class="name">{{ detail.dockingWharf }}</span>
          </div>
          <div class="listitem">
            <span class="span">靠泊泊位</span>
            <span class="name">{{ detail.dockingBerth }}</span>
          </div>
          <div class="listitem">
            <span class="span">货品</span>
            <span class="name">{{ detail.goods }}</span>
          </div>
          <div class="listitem">
            <span class="span">靠泊港口</span>
            <span class="name">{{ detail.dockingPort }}</span>
          </div>
          <div class="listitem">
            <span class="span">上一港</span>
            <span class="name">{{ detail.beforePort }}</span>
          </div>
          <div class="listitem">
            <span class="span">抵港时间</span>
            <span class="name">{{ detail.arrivalTime }}</span>
          </div>

          <div class="listitem">
            <span class="span">报告海事机构</span>
            <span class="name">{{ detail.reportingAgency }}</span>
          </div>
          <div class="listitem">
            <span class="span">预审人</span>
            <span class="name">{{ detail.examineUserName }}</span>
          </div>
          <div class="listitem">
            <span class="span">预审状态</span>
            <span class="name">{{
              detail.state == 0 ? "未处理" : detail.state == 1 ? "同意" : ""
            }}</span>
          </div>

          <div class="listitem">
            <span class="span">预审时间</span>
            <span class="name">{{ detail.examineTime }}</span>
          </div>
          <div class="listitem" style="width: 90%">
            <span style="width: 96px" class="span">合同文件</span>
            <div style="width: 90%" v-if="fileList.length != 0">
              <div
                v-for="(item, index) in fileList"
                style="
                  text-align: center;
                  display: flex;
                  justify-content: center;
                  align-items: center;
                "
              >
                <span
                  style="
                    color: blue;
                    cursor: pointer;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                  "
                  @click="hanleFiles(detail.files[index])"
                  >{{ item }}</span
                >
              </div>
            </div>
            <el-image
              ref="elImageRef"
              v-show="false"
              class="img"
              :src="filesImg"
              :preview-src-list="imgList"
            ></el-image>
            <div style="width: 90%" v-if="provefileList.length != 0">
              <div
                v-for="(item, index) in provefileList"
                style="
                  display: flex;
                  justify-content: center;
                  align-items: center;
                  flex-direction: column;
                "
              >
                <span
                  style="
                    color: blue;
                    cursor: pointer;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                  "
                  @click="hanleProve(detail.prove[index])"
                  >{{ item }}</span
                >
              </div>
            </div>
            <el-image
              ref="proveRef"
              v-show="false"
              class="img"
              :src="proveImg"
              :preview-src-list="proveList"
            ></el-image>
          </div>
          <div  @click="ifShow()" class="table" style="cursor: pointer; background-color: #f4f4f4;width: 90%;color: #909399;height: 40px;display: flex;align-items: center;justify-content: space-between;">
            <div style="margin-right: 5px;margin-left: 20px;">
              <i class="el-icon-search"></i> 
            船舶进/出港申报记录
            </div>
            
            <div style="margin-right: 10px;">></div>
          </div>
        </div>
        <!-- 出港 -->
        <div class="list" v-if="type == 1">
          <div class="listitem">
            <span class="span">船舶名称</span>
            <!-- <span class="name">22222222</span> -->
            <span class="name">{{ detail.shipName }}</span>
          </div>
          <div class="listitem">
            <span class="span">船舶识别号</span>
            <span class="name">{{ detail.shipId }}</span>
          </div>
          <div class="listitem">
            <span class="span">申报员</span>
            <span class="name">{{ detail.createBy }}</span>
          </div>
          <div class="listitem">
            <span class="span">货主单位</span>
            <span class="name">{{ detail.ownerUnit }}</span>
          </div>
          <div class="listitem">
            <span class="span">发货人</span>
            <span class="name">{{ detail.shipper }}</span>
          </div>
          <div class="listitem">
            <span class="span">货物总重(吨)</span>
            <span class="name">{{ detail.totalWeight }}</span>
          </div>
          <div class="listitem">
            <span class="span">靠泊码头</span>
            <span class="name">{{ detail.dockingWharf }}</span>
          </div>
          <div class="listitem">
            <span class="span">靠泊泊位</span>
            <span class="name">{{ detail.dockingBerth }}</span>
          </div>
          <div class="listitem">
            <span class="span">卸载货品</span>
            <span class="name">{{ detail.lastGoods }}</span>
          </div>
          <div class="listitem">
            <span class="span">拟载货品</span>
            <span class="name">{{ detail.nextGoods }}</span>
          </div>
          <div class="listitem">
            <span class="span">靠泊港口</span>
            <span class="name">{{ detail.departurePort }}</span>
          </div>
          <div class="listitem">
            <span class="span">下一港</span>
            <span class="name">{{ detail.destinationPort }}</span>
          </div>

          <div class="listitem">
            <span class="span">离港时间</span>
            <span class="name">{{ detail.departureTime }}</span>
          </div>
          <div class="listitem">
            <span class="span">提交海事单位</span>
            <span class="name">{{ detail.reportingAgency }}</span>
          </div>

          <div class="listitem">
            <span class="span">申报时间</span>
            <span class="name">{{ detail.createTime }}</span>
          </div>
          <div class="listitem" v-if="detail.state == 2">
            <span class="span">拒绝原因</span>
            <span class="name">{{ detail.reason }}</span>
          </div>
          <div class="listitem" v-if="detail.state > 0">
            <span class="span">预审人</span>
            <span class="name">{{ detail.examineUserName }}</span>
          </div>
          <div class="listitem" v-if="detail.state > 0">
            <span class="span">预审时间</span>
            <span class="name">{{ detail.examineTime }}</span>
          </div>

          <div class="listitem">
            <span class="span">预审状态</span>
            <span class="name">{{
              detail.state == 0 ? "未处理" : detail.state == 1 ? "同意" : ""
            }}</span>
          </div>

          <!-- <div class="listitem">
            <span class="span">预审时间</span>
            <span class="name">{{ detail.examineTime }}</span>
          </div> -->
          <div class="listitem" style="width: 90%">
            <span style="width: 96px" class="span">合同文件</span>
            <div style="width: 90%" v-if="fileList.length != 0">
              <div
                v-for="(item, index) in fileList"
                style="
                  text-align: center;
                  display: flex;
                  justify-content: center;
                  align-items: center;
                "
              >
                <span
                  style="
                    color: blue;
                    cursor: pointer;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    width: 100%;
                  "
                  @click="hanleFiles(detail.files[index])"
                  >{{ item }}</span
                >
              </div>
            </div>
            <el-image
              ref="elImageRef"
              v-show="false"
              class="img"
              :src="filesImg"
              :preview-src-list="imgList"
            ></el-image>
            <div style="width: 90%" v-if="provefileList.length != 0">
              <div
                v-for="(item, index) in provefileList"
                style="
                  display: flex;
                  justify-content: center;
                  align-items: center;
                  flex-direction: column;
                "
              >
                <span
                  style="
                    color: blue;
                    cursor: pointer;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                  "
                  @click="hanleProve(detail.prove[index])"
                  >{{ item }}</span
                >
              </div>
            </div>
            <el-image
              ref="proveRef"
              v-show="false"
              class="img"
              :src="proveImg"
              :preview-src-list="proveList"
            ></el-image>
          </div>
          <div  @click="ifShow()" class="table" style="cursor: pointer; background-color: #f4f4f4;width: 90%;color: #909399;height: 40px;display: flex;align-items: center;justify-content: space-between;">
            <div style="margin-right: 5px;margin-left: 20px;">
              <i class="el-icon-search"></i> 
            船舶进/出港申报记录
            </div>
            
            <div style="margin-right: 10px;">></div>
          </div>
          <!--<div style="width: 85%" class="table">
            <el-collapse accordion>
              <el-collapse-item>
                <template slot="title"> 船舶出港申报记录 </template>
                <div>
                  <el-table
                    :header-cell-style="{ textAlign: 'center' }"
                    :cell-style="{ textAlign: 'center' }"
                    class="check"
                    :data="outPortTable"
                    style="width: 100%"
                    height="250"
                  >
                    <el-table-column
                      prop="code"
                      label="申请编号"
                      width="150"
                      fixed="left"
                    >
                    </el-table-column>
                    <el-table-column
                      prop="shipId"
                      label="船舶识别号"
                      width="180"
                    >
                    </el-table-column>
                    <el-table-column
                      prop="shipName"
                      label="船舶名称"
                      width="150"
                    >
                    </el-table-column>
                    <el-table-column
                      prop="ownerUnit"
                      label="货主单位"
                      width="180"
                    >
                    </el-table-column>
                    <el-table-column
                      prop="declareUserName"
                      label="申报员"
                      width="180"
                    >
                    </el-table-column>
                    <el-table-column
                      prop="declareTime"
                      label="申报时间"
                      width="180"
                    >
                    </el-table-column>
                    <el-table-column prop="state" label="申报结果" width="180">
                      <template slot-scope="scope">
                        {{
                          scope.row.state == 1
                            ? "已同意"
                            : scope.row.state == 2
                            ? "已拒绝"
                            : scope.row.state == 3
                            ? "已撤销"
                            : ""
                        }}
                      </template>
                    </el-table-column>
                    <el-table-column
                      prop="zip"
                      fixed="right"
                      label="操作"
                      width="100"
                    >
                      <template slot-scope="scope">
                        <el-button
                          @click="handleOutPort(scope.row)"
                          type="text"
                          size="small"
                        >
                          <i class="el-icon-edit"></i>查看</el-button
                        >
                      </template>
                    </el-table-column>
                  </el-table>
                </div>
              </el-collapse-item>
            </el-collapse>
          </div> -->
        </div>
        <div
          v-if="detail.state == 0"
          style="display: flex; justify-content: space-around; margin-top: 10px"
        >
          <el-tooltip
            class="item"
            effect="dark"
            content="暂无权限操作"
            placement="bottom"
            v-show="isComit"
          >
            <el-button @click="editSucc" type="primary" :disabled="isComit"
              >确认</el-button
            >
          </el-tooltip>
          <el-tooltip
            class="item"
            effect="dark"
            content="暂无权限操作"
            placement="bottom"
            v-show="isComit"
          >
            <el-button type="danger" @click="editRe" :disabled="isComit"
              >拒绝</el-button
            >
          </el-tooltip>
          
          <div
          v-if="isComit == false" 
            style="display: flex; justify-content: space-around; width: 100%"
          >
            <el-button type="danger" @click="editRe" :disabled="isComit"
              >拒绝</el-button
            >
            <el-button @click="editSucc" type="primary" :disabled="isComit"
              >确认</el-button
            >
          </div>
        </div>
      </el-dialog>
    </div>
    <!-- 审批 -->
    <div>
      <el-dialog
        :title="`${title}预审`"
        :visible.sync="Succvisible"
        :close-on-click-modal="false"
        class="spec-dialog space"
        :modal="false"
        align-center
        @close="cancel"
        v-if="Succvisible"
      >
        <div class="succ" style="display: flex; width: 100%">
          <span>同意理由</span>
          <el-input
            type="textarea"
            :rows="2"
            placeholder="同意理由"
            v-model="SuccReson"
            style="width: 80%; margin-left: 10px"
          />
        </div>
        <div
          class="bt"
          style="
            display: flex;
            justify-content: space-around;
            align-items: center;
            margin-top: 10px;
          "
        >
          <el-button type="primary" plain @click="cancel">取消</el-button>
          <el-button type="primary" @click="submitSucc">提交</el-button>
        </div>
      </el-dialog>
    </div>
    <div>
      <el-dialog
        :title="`${title}预审`"
        :visible.sync="Revisible"
        :close-on-click-modal="false"
        class="spec-dialog space"
        :modal="false"
        align-center
        @close="cancel"
      >
        <div class="succ" style="display: flex; width: 100%">
          <span>拒绝理由</span>
          <el-input
            style="width: 80%; margin-left: 10px"
            type="textarea"
            :rows="2"
            placeholder="请输入不同意理由"
            v-model="ReReson"
          />
        </div>
        <div
          class="bt"
          style="
            display: flex;
            justify-content: space-around;
            align-items: center;
            margin-top: 10px;
          "
        >
          <el-button type="primary" plain @click="cancel">取消</el-button>
          <el-button type="primary" @click="submitRe">提交</el-button>
        </div>
      </el-dialog>
    </div>
    <div style="z-index:2000">
      <el-drawer
        title="船舶进/出港申报记录"
        :visible.sync="table"
        direction="rtl"
        size="50%"
        :modal="false"
        @close="closeTable"
      >
        <div v-if="showInDetail">
          <div class="list">
            <div class="listitem" style="width: 90%;">
              <span class="span">申请编号</span>
              <span class="name">{{ outDetail.code }}</span>
            </div>
            <div class="listitem">
              <span class="span">船舶名称</span>
              <span class="name">{{ inDetail.shipName }}</span>
            </div>
            <div class="listitem">
              <span class="span">船舶识别号</span>
              <span class="name">{{ inDetail.shipId }}</span>
            </div>
            <div class="listitem">
              <span class="span">船舶九位码</span>
              <span class="name">{{ inDetail.mmsi }}</span>
            </div>
            <div class="listitem">
              <span class="span">货主单位</span>
              <span class="name">{{ inDetail.ownerUnit }}</span>
            </div>
            <div class="listitem">
              <span class="span">收货人</span>
              <span class="name">{{ inDetail.consignee }}</span>
            </div>
            <div class="listitem">
              <span class="span">总重量</span>
              <span class="name">{{ inDetail.totalWeight }}</span>
            </div>
            <div class="listitem">
              <span class="span">靠泊码头</span>
              <span class="name">{{ inDetail.dockingWharf }}</span>
            </div>
            <div class="listitem">
              <span class="span">靠泊泊位</span>
              <span class="name">{{ inDetail.dockingBerth }}</span>
            </div>
            <div class="listitem">
              <span class="span">货品</span>
              <span class="name">{{ inDetail.goods }}</span>
            </div>
            <div class="listitem">
              <span class="span">靠泊港口</span>
              <span class="name">{{ inDetail.dockingPort }}</span>
            </div>
            <div class="listitem">
              <span class="span">上一港</span>
              <span class="name">{{ inDetail.beforePort }}</span>
            </div>
            <div class="listitem">
              <span class="span">抵港时间</span>
              <span class="name">{{ inDetail.arrivalTime }}</span>
            </div>

            <div class="listitem">
              <span class="span">报告海事机构</span>
              <span class="name">{{ inDetail.reportingAgency }}</span>
            </div>
            <div class="listitem">
              <span class="span">预审人</span>
              <span class="name">{{ inDetail.examineUserName }}</span>
            </div>
            <div class="listitem">
              <span class="span">预审状态</span>
              <span class="name">{{
                inDetail.state == 0
                  ? "未处理"
                  : inDetail.state == 1
                  ? "同意"
                  : ""
              }}</span>
            </div>

            <div class="listitem">
              <span class="span">预审时间</span>
              <span class="name">{{ inDetail.examineTime }}</span>
            </div>
            <div class="listitem" style="width: 90%">
              <span style="width: 96px" class="span">合同文件</span>
              <div style="width: 90%" v-if="fileInList.length != 0">
                <div
                  v-for="(item, index) in fileInList"
                  style="
                    text-align: center;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                  "
                >
                  <span
                    style="
                      color: blue;
                      cursor: pointer;
                      display: flex;
                      justify-content: center;
                      align-items: center;
                      /* width: 100%; */
                    "
                    @click="hanleFiles(inDetail.files[index])"
                    >{{ item }}</span
                  >
                </div>
              </div>
              <el-image
                ref="elImageRef"
                v-show="false"
                class="img"
                :src="filesImg"
                :preview-src-list="imgList"
              ></el-image>
              <!-- <div style="width: 90%" v-if="provefileList.length != 0">
              <div
                v-for="(item, index) in provefileList"
                style="
                  display: flex;
                  justify-content: center;
                  align-items: center;
                  flex-direction: column;
                "
              >
                <span
                  style="
                    color: blue;
                    cursor: pointer;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                  "
                  @click="hanleProve(inDetail.prove[index])"
                  >{{ item }}</span
                >
              </div>
            </div> -->
              <!-- <el-image
              ref="proveRef"
              v-show="false"
              class="img"
              :src="proveImg"
              :preview-src-list="proveList"
            ></el-image> -->
            </div>
          </div>
        </div>
        <div v-if="showOutDetail">
          <!-- 出港 -->
          <div class="list">
            <div class="listitem" style="width: 90%;">
              <span class="span">申请编号</span>
              <span class="name">{{ outDetail.code }}</span>
            </div>
            <div class="listitem">
              <span class="span">船舶名称</span>
              <span class="name">{{ outDetail.shipName }}</span>
            </div>
            <div class="listitem">
              <span class="span">船舶识别号</span>
              <span class="name">{{ outDetail.shipId }}</span>
            </div>
            <div class="listitem">
              <span class="span">申报员</span>
              <span class="name">{{ outDetail.createBy }}</span>
            </div>
            <div class="listitem">
              <span class="span">货主单位</span>
              <span class="name">{{ outDetail.ownerUnit }}</span>
            </div>
            <div class="listitem">
              <span class="span">发货人</span>
              <span class="name">{{ outDetail.shipper }}</span>
            </div>
            <div class="listitem">
              <span class="span">货物总重(吨)</span>
              <span class="name">{{ outDetail.totalWeight }}</span>
            </div>
            <div class="listitem">
              <span class="span">靠泊码头</span>
              <span class="name">{{ outDetail.dockingWharf }}</span>
            </div>
            <div class="listitem">
              <span class="span">靠泊泊位</span>
              <span class="name">{{ outDetail.dockingBerth }}</span>
            </div>
            <div class="listitem">
              <span class="span">卸载货品</span>
              <span class="name">{{ outDetail.lastGoods }}</span>
            </div>
            <div class="listitem">
              <span class="span">拟载货品</span>
              <span class="name">{{ outDetail.nextGoods }}</span>
            </div>
            <div class="listitem">
              <span class="span">靠泊港口</span>
              <span class="name">{{ outDetail.departurePort }}</span>
            </div>
            <div class="listitem">
              <span class="span">下一港</span>
              <span class="name">{{ outDetail.destinationPort }}</span>
            </div>

            <div class="listitem">
              <span class="span">离港时间</span>
              <span class="name">{{ outDetail.departureTime }}</span>
            </div>
            <div class="listitem">
              <span class="span">提交海事单位</span>
              <span class="name">{{ outDetail.reportingAgency }}</span>
            </div>

            <div class="listitem">
              <span class="span">申报时间</span>
              <span class="name">{{ outDetail.createTime }}</span>
            </div>
            <div class="listitem" v-if="outDetail.state == 2">
              <span class="span">拒绝原因</span>
              <span class="name">{{ outDetail.reason }}</span>
            </div>
            <div class="listitem" v-if="outDetail.state > 0">
              <span class="span">预审人</span>
              <span class="name">{{ outDetail.examineUserName }}</span>
            </div>
            <div class="listitem" v-if="outDetail.state > 0">
              <span class="span">预审时间</span>
              <span class="name">{{ outDetail.examineTime }}</span>
            </div>

            <div class="listitem">
              <span class="span">预审状态</span>
              <span class="name">{{
                outDetail.state == 0
                  ? "未处理"
                  : outDetail.state == 1
                  ? "同意"
                  : ""
              }}</span>
            </div>
            <div class="listitem" style="width: 90%">
              <span style="width: 96px" class="span">合同文件</span>
              <!-- <div style="width: 90%" v-if="fileList.length != 0">
                <div
                  v-for="(item, index) in fileList"
                  style="
                    text-align: center;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                  "
                >
                  <span
                    style="
                      color: blue;
                      cursor: pointer;
                      display: flex;
                      justify-content: center;
                      align-items: center;
                      width: 100%;
                    "
                    @click="hanleFiles(outDetail.files[index])"
                    >{{ item }}</span
                  >
                </div>
              </div>
              <el-image
                ref="elImageRef"
                v-show="false"
                class="img"
                :src="filesImg"
                :preview-src-list="imgList"
              ></el-image> -->
              <div style="width: 90%" v-if="proveOutfileList.length != 0">
                <div
                  v-for="(item, index) in proveOutfileList"
                  style="
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    flex-direction: column;
                  "
                >
                  <span
                    style="
                      color: blue;
                      cursor: pointer;
                      display: flex;
                      justify-content: center;
                      align-items: center;
                    "
                    @click="hanleProve(outDetail.prove[index])"
                    >{{ item }}</span
                  >
                </div>
              </div>
              <el-image
                ref="proveRef"
                v-show="false"
                class="img"
                :src="proveImg"
                :preview-src-list="proveList"
              ></el-image>
            </div>
          </div>
        </div>
        <div style="padding: 10px">
          <el-tag
            style="cursor: pointer"
            @click="
              () => {
                showIn = !showIn;
              }
            "
          >
            <i class="el-icon-search"></i>
            进港申报记录</el-tag
          >
        </div>
        <div v-if="showIn">
          <el-table
            :header-cell-style="{ textAlign: 'center' }"
            :cell-style="{ textAlign: 'center' }"
            class="check"
            :data="inPortTable"
            style="width: 100%"
            height="250"
          >
            <el-table-column
              fixed="left"
              prop="code"
              label="申请编号"
              width="150"
            >
            </el-table-column>
            <el-table-column prop="shipId" label="船舶识别号" width="180">
            </el-table-column>
            <el-table-column prop="shipName" label="船舶名称" width="150">
            </el-table-column>
            <el-table-column prop="ownerUnit" label="货主单位" width="180">
            </el-table-column>
            <el-table-column prop="declareUserName" label="申报员" width="180">
            </el-table-column>
            <el-table-column prop="declareTime" label="申报时间" width="180">
            </el-table-column>
            <el-table-column prop="state" label="申报结果" width="180">
              <template slot-scope="scope">
                {{
                  scope.row.state == 1
                    ? "已同意"
                    : scope.row.state == 2
                    ? "已拒绝"
                    : scope.row.state == 3
                    ? "已撤销"
                    : ""
                }}
              </template>
            </el-table-column>
            <el-table-column prop="zip" fixed="right" label="操作" width="70">
              <template slot-scope="scope">
                <el-button
                  @click="handleInPort(scope.row)"
                  type="text"
                  size="small"
                >
                  <i class="el-icon-edit"></i>查看</el-button
                >
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div style="padding: 10px">
          <el-tag
            style="cursor: pointer"
            @click="
              () => {
                showOut = !showOut;
              }
            "
          >
            <i class="el-icon-search"></i>
            出港申报记录</el-tag
          >
        </div>
        <div v-if="showOut">
          <el-table
            :header-cell-style="{ textAlign: 'center' }"
            :cell-style="{ textAlign: 'center' }"
            class="check"
            :data="outPortTable"
            style="width: 100%"
            height="250"
          >
            <el-table-column
              prop="code"
              label="申请编号"
              width="150"
              fixed="left"
            >
            </el-table-column>
            <el-table-column prop="shipId" label="船舶识别号" width="180">
            </el-table-column>
            <el-table-column prop="shipName" label="船舶名称" width="150">
            </el-table-column>
            <el-table-column prop="ownerUnit" label="货主单位" width="180">
            </el-table-column>
            <el-table-column prop="declareUserName" label="申报员" width="180">
            </el-table-column>
            <el-table-column prop="declareTime" label="申报时间" width="180">
            </el-table-column>
            <el-table-column prop="state" label="申报结果" width="180">
              <template slot-scope="scope">
                {{
                  scope.row.state == 1
                    ? "已同意"
                    : scope.row.state == 2
                    ? "已拒绝"
                    : scope.row.state == 3
                    ? "已撤销"
                    : ""
                }}
              </template>
            </el-table-column>
            <el-table-column prop="zip" fixed="right" label="操作" width="100">
              <template slot-scope="scope">
                <el-button
                  @click="handleOutPort(scope.row)"
                  type="text"
                  size="small"
                >
                  <i class="el-icon-edit"></i>查看</el-button
                >
              </template>
            </el-table-column>
          </el-table>
        </div>
      </el-drawer>
    </div>
    <!-- 审批 -->
    <!-- <div v-if="visible">
      <el-dialog
        :title="title + '审批'"
        :visible.sync="visible"
        width="30%"
        :modal="false"
        :close-on-click-modal="false"
      >
        <div>
          <el-radio-group v-model="radio">
            
            <el-radio :label="1">同意</el-radio>
            <el-radio :label="2">不同意</el-radio>
          </el-radio-group>
        </div>
        <div v-if="radio==1" style="display: flex;margin-top: 20px;width: 100%;">
          <div>同意理由</div>
          <div style="width: 80%;margin-left: 10px;">
            <el-input
              type="textarea"
              :rows="2"
              placeholder="同意理由"
              v-model="SuccReson"
            >
            </el-input>
          </div>
        </div>
        <div v-if="radio==2" style="display: flex;margin-top:20px;width: 100%;">
          <div>不同意理由</div>
          <div style="width: 80%;margin-left: 10px;">
            <el-input
              type="textarea"
              :rows="2"
              placeholder="请输入不同意理由"
              v-model="ReReson"
            >
            </el-input>
          </div>
        </div>
        <div v-if="radio!=null" style="display: flex;justify-content: space-around;width: 80%;margin:20px auto;margin-bottom: 0px;">
          <el-button type="primary" plain @click="cancel">取消</el-button>
          <el-button type="primary" @click="confirm()">提交</el-button>
        </div>
      </el-dialog>
    </div> -->
  </div>
</template>
<script>
import { color } from "echarts";
import {
  declareList,
  approve,
  InPortDetail,
  OutPortDetail,
  PortEdit,
  InPortHis,
  OutPortHis,
} from "../api/list";
import tool from "@/utils/tool";
export default {
  name: "bottom",
  data() {
    return {
      showOutDetail: false,
      outDetail: {},
      proveOutfileList: [],
      showOut: true,
      showIn: true,
      showInDetail: false,
      inDetail: {},
      fileInList: [],
      table: false,
      inPortTable: [],
      outPortTable: [],
      type: 0,
      isComit: true,
      isShow: true,
      inter: null,
      setInter: null, //页面刷新数据

      entry_out_apply: [], //列表数据
      detail: {}, //详情数据
      dialogVisible: false,
      title: "",
      Succvisible: false, //理由弹框
      Revisible: false,
      SuccReson: "", //同意理由
      ReReson: "", //拒绝理由
      visible: false, //审批弹框
      radio: null, //审批选择按钮
      code: null, //部门
      showList: false,
      imgList: [],
      proveList: [],
      fileList: [],
      provefileList: [],
      showFile: false,
      showProve: false,
      filesImg: "",
      proveImg: "",
      reportCode: null, //申请编号
    };
  },
  methods: {
    ifShow() {
      this.table = true;
    },
    hanleFiles(item) {
      // console.log(222,item);png 、jpg、jpeg
      if(item.includes("png")||item.includes("jpg")||item.includes("jpeg")){
        this.imgList = [];
        let src = "http://198.22.15.178:8090/wgfw_xc/prod-api" + item;
        this.filesImg = src;
        this.imgList.push(src); // 需要的预览列表图片地址
        this.$refs.elImageRef.showViewer = true; // 这个属性就可以控制 预览视图打开

      }else{
        this.showFile = false;
        window.open("http://198.22.15.178:8090/wgfw_xc/prod-api" + item);

      }
      // if (item.includes("pdf")) {
      //   this.showFile = false;
      //   window.open("http://198.22.15.178:8090/wgfw_xc/prod-api" + item);
      // } else {
      //   this.imgList = [];
      //   let src = "http://198.22.15.178:8090/wgfw_xc/prod-api" + item;
      //   this.filesImg = src;
      //   this.imgList.push(src); // 需要的预览列表图片地址
      //   this.$refs.elImageRef.showViewer = true; // 这个属性就可以控制 预览视图打开
      //   // console.log(this.$refs.elImageRef)
      // }
    },
    hanleProve(item) {
      // console.log(item);
      if(item.includes("png")||item.includes("jpg")||item.includes("jpeg")){
        this.showProve = true;
        this.proveList = [];
        let src = "http://198.22.15.178:8090/wgfw_xc/prod-api" + item;
        this.proveImg = src;
        this.proveList.push(src);
        // 需要的预览列表图片地址
        this.$refs.proveRef.showViewer = true; // 这个属性就可以控制 预览视图打开

      }else{
        this.showProve = false;
        window.open("http://198.22.15.178:8090/wgfw_xc/prod-api" + item);

      }
      // if (item.includes("pdf")) {
      //   this.showProve = false;
      //   window.open("http://198.22.15.178:8090/wgfw_xc/prod-api" + item);
      // } else {
      //   this.showProve = true;
      //   this.proveList = [];
      //   let src = "http://198.22.15.178:8090/wgfw_xc/prod-api" + item;
      //   this.proveImg = src;
      //   this.proveList.push(src);
      //   // 需要的预览列表图片地址
      //   this.$refs.proveRef.showViewer = true; // 这个属性就可以控制 预览视图打开
      // }
    },
    renderBoardWfglBottom() {
      this.code = tool.data.get("ORGCODE");
      this.getDeclareList();
    },
    toggleLeftPanel() {
      this.isShow = !this.isShow;
      // microApp
      //   .getGlobalData("PUBLIC_METHODS")
      //   .changeWidth(this.isShow, "bottom", 303);
    },
    // 进出港列表
    getDeclareList() {
      this.showList = false;
      declareList({ orgCode: this.code }).then((res) => {
        res.data.forEach((item) => {
          item.declareType = item.declareType.split("申")[0];
        });
        this.entry_out_apply = res.data;
        console.log(res.data);
        if (res.data.length == 0) this.showList = true;
      });
    },
    //审批
    confirm() {
      if (this.radio == 1) {
        this.submitSucc(); //同意
      } else if (this.radio == 2) {
        this.submitRe(); //拒绝
      }
    },
    // 查看
    todetail(item) {
      this.fileList = [];
      this.provefileList = [];
      if (item.declareType == "进港") {
        this.type = 0;
        InPortDetail(item.id).then((res) => {
          this.detail = res.data;
          // this.deptName=this.detail.reportingAgency.substr(2)
          /*
          if (
            this.detail.reportingAgency.substr(2) ==
            tool.data.get("USER_INFO")?.depName
          ) {
            this.isComit = false;
          } else {
            this.isComit = true;
          }
            */
            if(!this.hasBtnPermission('wfgl:wfglRight:examine')){
              this.isComit = true;
                this.$message({
                  message: "暂无权限操作进港申报",
                  type: "warning",
                  duration:1000*2
                });
                // return;
            }else{
              this.isComit = false;
            }
          this.reportCode = this.detail.code;
          this.title = "进港申报";
          let data = res.data;
          if (data.files) {
            let list = data.files.split(",");
            this.detail.files = list;
            list.forEach((item) => {
              let file = item.split("/");
              this.fileList.push(file[file.length - 1]);
            });
          }
          this.gethistory(this.detail.shipId);
          this.getoutHis(this.detail.shipId);
        });
      } else {
        OutPortDetail(item.id).then((res) => {
          this.detail = res.data;
          this.type = 1;
          this.reportCode = this.detail.code;
          this.title = "出港申报";
          let data = res.data;
          // if (
          //   this.detail.reportingAgency.substr(2) ==
          //   tool.data.get("USER_INFO")?.depName
          // ) {
          //   this.isComit = false;
          // } else {
          //   this.isComit = true;
          // }
          if(!this.hasBtnPermission('wfgl:wfglRight:examine')){
              this.isComit = true;
                this.$message({
                  message: "暂无权限操作进港申报",
                  type: "warning",
                  duration:1000*2
                });
                // return;
            }else{
              this.isComit = false;
            }
          if (data.prove) {
            let list = data.prove.split(",");
            this.detail.prove = list;
            list.forEach((item) => {
              let file = item.split("/");
              this.provefileList.push(file[file.length - 1]);
            });
          }
          this.getoutHis(this.detail.shipId);
          this.gethistory(this.detail.shipId);

        });
      }
      this.dialogVisible = true;
    },
    getoutHis(shipId) {
      OutPortHis(shipId).then((res) => {
        this.outPortTable = res.data;
      });
    },
    gethistory(shipId) {
      InPortHis(shipId).then((res) => {
        this.inPortTable = res.data;
      });
    },

    // 审批取消
    // cancel() {
    //   this.visible = false;
    //   this.radio = null;
    //   this.ReReson = "";
    //   this.SuccReson = "";
    // },
    // 同意出港取消
    cancel() {
      this.Succvisible = false;
      this.ReReson = "";
      this.SuccReson = "";
      this.Revisible = false;
    },
    // 同意
    submitSucc() {
      // this.Succvisible = false;
      if (this.title == "进港申报") {
        let data = {
          state: "1",
          id: String(this.detail.id),
          declareType: "进港申报",
          reason: this.SuccReson,
        };
        PortEdit(data).then((res) => {
          this.cancel();
          this.dialogVisible = false;
        });
      } else {
        let data = {
          state: "1",
          id: String(this.detail.id),
          declareType: "出港申报",
          reason: this.SuccReson,
        };
        PortEdit(data).then((res) => {
          console.log(res);
          this.cancel();
          this.dialogVisible = false;
        });
      }
    },
    editSucc() {
      this.Succvisible = true;
    },
    ReCancel() {
      this.Revisible = false;
    },
    // 拒绝提交
    submitRe() {
      if (this.title == "进港申报") {
        let data = {
          state: "2",
          id: String(this.detail.id),
          declareType: "进港申报",
          reason: this.ReReson,
        };
        PortEdit(data).then((res) => {
          console.log(res);
          this.cancel();
          this.dialogVisible = false;
        });
      } else {
        let data = {
          state: "2",
          id: String(this.detail.id),
          declareType: "出港申报",
          reason: this.ReReson,
        };
        PortEdit(data).then((res) => {
          console.log(res);
          this.cancel();
          this.dialogVisible = false;
        });
      }
    },
    editRe() {
      this.Revisible = true;
    },
    // 关闭对话框
    dialogClose() {
      this.detail = {};
    },
    handleInPort(row) {
      this.fileInList = [];
      this.inDetail = {};
      InPortDetail(row.id).then((res) => {
        this.inDetail = res.data;
        // this.deptName=this.inDetail.reportingAgency.substr(2)
        // if (
        //   this.inDetail.reportingAgency.substr(2) ==
        //   tool.data.get("USER_INFO")?.depName
        // ) {
        //   this.isComit = false;
        // } else {
        //   this.isComit = true;
        // }
        if(!this.hasBtnPermission('wfgl:wfglRight:examine')){
              this.isComit = true;
                this.$message({
                  message: "暂无权限操作进港申报",
                  type: "warning",
                  duration:1000*2
                });
                // return;
            }else{
              this.isComit = false;
            }
        let data = res.data;
        if (data.files) {
          let list = data.files.split(",");
          this.inDetail.files = list;
          list.forEach((item) => {
            let file = item.split("/");
            this.fileInList.push(file[file.length - 1]);
          });
        }
      });
      this.showOut = false;
      this.showInDetail = true;
      this.showOutDetail=false
    },
    handleOutPort(row) {
      this.outDetail = {};
      this.proveOutfileList = [];
      OutPortDetail(row.id).then((res) => {
        this.outDetail = res.data;
        let data = res.data;
        // if (
        //   this.outDetail.reportingAgency.substr(2) ==
        //   tool.data.get("USER_INFO")?.depName
        // ) {
        //   this.isComit = false;
        // } else {
        //   this.isComit = true;
        // }
        if(!this.hasBtnPermission('wfgl:wfglRight:examine')){
              this.isComit = true;
                this.$message({
                  message: "暂无权限操作进港申报",
                  type: "warning",
                  duration:1000*2
                });
                // return;
            }else{
              this.isComit = false;
            }
        if (data.prove) {
          let list = data.prove.split(",");
          this.outDetail.prove = list;
          list.forEach((item) => {
            let file = item.split("/");
            this.proveOutfileList.push(file[file.length - 1]);
          });
        }
      });
      this.showOutDetail = true;
      this.showIn = false;
      this.showInDetail = false;
    },
    closeTable(){
      this.fileInList = [];
      this.proveOutfileList = [];
      this.showInDetail=false
      this.showOutDetail=false
      this.showIn=true
      this.showOut=true
    }
  },
  created() {},
  destroyed() {
    clearInterval(this.inter);
    this.inter = null;
    clearInterval(this.setInter);
    this.setInter = null;
  },
  mounted() {
    // localStorage.setItem(
    //   "ORGCODE",
    //   '10011002'
    // );
    this.code = tool.data.get("ORGCODE");

    this.getDeclareList();
    this.inter = setInterval(() => {
      // console.log('定时器xia')
      if (this.code != tool.data.get("ORGCODE")) {
        this.code = tool.data.get("ORGCODE");
        this.getDeclareList();
      }
    }, 150);
    // 五分钟刷数据
    this.setInter = setInterval(() => {
      this.getDeclareList();
    }, 30 * 10000);
    // this.code=tool.data.get("ORGCODE");
    // if(window.microApp){
    //   // microApp.getGlobalData("PUBLIC_METHODS").changeWidth(true, "bottom", 303);
    //   window.microApp.setGlobalData({renderBoardWfglBottom})
    // }
  },
};
</script>

<style scoped>
.bottom {
  position: absolute;
  bottom: 0;
  left: 435px;
  z-index: 100;
  /* width: 1130px; */
  width: calc(100vw - 435px - 435px);
  height: 303px;
  padding: 5px 0;
  background-color: #132054;
  transition: bottom 0.3s ease-in-out;
}

.bottom_box {
  margin: auto;
  /* width: 1105px; */
  width: calc(100vw - 435px - 435px - 20px);
  height: 293px;
  color: white;
  border-radius: 10px;
  background-color: #132054;
  padding: 5px;
  border: 1px #869afd solid;
}

.bottom_box .big-tit {
  font-family: PingFang SC;
  font-size: 16px;
  font-weight: 400;
  line-height: 22.4px;
  letter-spacing: 0.03em;
  text-align: center;
  width: calc(100vw - 435px - 435px);
  text-align: left;
  position: relative;
  /* padding-right: 50px; */
  width: 100%;
  overflow: hidden;
}

.content {
  margin-top: 15px;
  border: 1px #2c407a solid;
}

.table-header {
  font-size: 16px;
  height: 24px;
  line-height: 24px;
  background: linear-gradient(
    0deg,
    rgba(17, 80, 173, 0.34) -24.83%,
    rgba(98, 140, 202, 0.0300825) 100%
  );
  display: flex;
  color: #c7ccd8;
}

.item-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  /* align-items: center; */
}

.item {
  display: flex;
  /* justify-content: space-around; */
  align-items: center;
  font-size: 14px;
}

/* ul {
  list-style: none;
  padding: 0;
  margin: 0 auto;
  li,
  a {
    padding: 0 5px;
    height: 35px;
    line-height: 35px;
    display: flex;
    font-family: PingFang SC;
    font-size: 12px;
    font-weight: 400;
    text-align: left;
  }
} */
/*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/
::v-deep .scroll ::-webkit-scrollbar {
  width: 0px !important;
  height: 0px !important;
  background-color: #132054 !important;
}

/*定义滚动条轨道 内阴影+圆角*/
::v-deep .scroll ::-webkit-scrollbar-track {
  border-radius: 10px !important;
  background-color: #132054 !important;
}

/*定义滑块 内阴影+圆角*/
::v-deep .scroll ::-webkit-scrollbar-thumb {
  border-radius: 10px !important;
}

.showButton {
  height: 40px;
  width: 60px;
  /* background-color: #52c2f5; */
  background: linear-gradient(
    90deg,
    rgba(130, 209, 246, 1) 0%,
    rgba(41, 182, 244, 1) 50%,
    rgba(0, 137, 205, 1) 99%
  );
  text-align: center;
  line-height: 40px;
  position: absolute;
  top: -40px;
  left: 48%;
  color: #ffffff;
  font-size: 16px;
  cursor: pointer;
  border-radius: 5px 5px 0 0;
}

.list {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
}
.listitem {
  /* background-color: blue; */
  width: 45%;
  border: 1px solid #e6ebf5;
  display: flex;
}
/* .list .item {
  width: 50%;
  border: 1px solid #e6ebf5;
  display: flex;
} */
.name {
  /* background-color:lightpink; */
  text-align: center;
  display: inline-block;
  height: 40px;
  width: 78%;
  line-height: 40px;
  overflow: overlay;
}
/* .list.item>text {
  text-align: center;
  display: inline-block;
  width: 100%;
  height: 40px;
  line-height: 40px;
} */

.span {
  color: #909399;
  text-align: center;
  display: inline-block;
  width: 113px;
  height: 40px;
  line-height: 40px;
  background-color: #f4f4f4;
}
::v-deep .check .el-table__body-wrapper::-webkit-scrollbar {
  width: 0px; /*滚动条宽度*/
  height: 10px;
}
/*定义滑块 内阴影+圆角*/
::v-deep .el-table__body-wrapper::-webkit-scrollbar-thumb {
  border-radius: 10px; /*滚动条的圆角*/
  background-color: #939392; /*滚动条的背景颜色*/
  width: 80px;
}
/*定义滚动条轨道 内阴影+圆角*/
::v-deep .el-table__body-wrapper::-webkit-scrollbar-track {
  box-shadow: 0px 1px 3px #071e4a inset; /*滚动条的背景区域的内阴影*/
  border-radius: 10px; /*滚动条的背景区域的圆角*/
  background-color: #f0f2f5; /*滚动条的背景颜色*/
}
::v-deep .el-table--scrollable-y .el-table__body-wrapper {
  overflow-y: scroll;
}
::v-deep .el-dialog {
  height: 65% !important;
  overflow-y: scroll;
}
::v-deep .el-dialog__header {
  position: sticky;
  top: 0px;
  background-color: white;
  z-index: 2000;
}
::v-deep .el-collapse-item__header {
  color: #909399 !important;
}
::v-deep .el-drawer{
  /* z-index:2000 !important; */
  /* padding-top: 39px !important;
  padding-bottom: 20px !important; */
  top:49px !important;
}
::v-deep .el-drawer__container{
  /* top:39px !important; */
  height: 92% !important;
}
</style>
